<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :conditionBtnRow="true"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:externalOperations="{data}"  >
        <vxe-form-item>
          <template>
            <a-button type="primary" class="blue-btn" @click="qlzjClick">手动清零转结年休假</a-button>
          </template>
        </vxe-form-item>
        <vxe-form-item>
            <template>
                <a-button type="primary" class="blue-btn mar-left-shi" @click="sdzjClick">手动转结年休假</a-button>
            </template>
        </vxe-form-item>
      </template>
      <template v-slot:operation_realname="{row}" data-desc="姓名">
            <span style="padding-right: 21;" v-if="row.realname.length == 2">
                <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                    {{trem}}
                    <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                </span>
            </span>
            <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
        </template>
    </commpVxeTable>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {sdqlzjts,sdzjts,userlist} from './service/index'
export default {
  components: {
    commpVxeTable
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.userlist,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      columnsVxe:[
        {
          title: '姓名',
          field: 'realname',
          width: 80,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_realname',
          }
        },{
          title: '年休假',
          align:"center",
          children: [
            {
              title: '效期开始时间',
              field: 'fnxjxqkssj',
            },{
              title: '效期结束时间',
              field: 'fnxjxqjssj',
            },{
              title: ' 应休天数',
              field: 'fnxjyxts',
              width: 100
            },{
              title: '转结天数',
              field: 'fnxjzjts',
              width: 100
            },{
              title: '剩余天数',
              field: 'fnxjsyts',
              width: 100
            },
          ],
        },{
          title: '参加工作时间',
          field: 'fcjgzsj',
          width: 130,
        },{
          title: '间隔年/月',
          field: 'fjkns',
          width: 100,
        },{
          title: '工龄',
          field: 'fgl',
          width: 80,
          titleInterval:true,
          slots: {
              header:'data2_header',
          }
        },{
          title: '本年度与节假日连休次数',
          field: 'fsfyjjrlx',
          width: 180,
        },
      ],
      formItem: [
        {
          label: '姓名',
          model: 'realname',
        },
      ],
      idList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      userlist().then(res => {
        let list = res.result.records
        list.forEach(item => {
          this.idList.push(item.id)
        })
      })
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
        ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
        ...this.dataTableConfig.paramet,
      }
    },
    // 手动清零转结年休假
    qlzjClick(){
      let list = this.idList.toString()
      sdqlzjts({userids:list}).then(res => {
        if(res.code == 200){
          this.$message.success(res.message)
          this.reCommpVxeTable = Date.now()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 手动转结年休假
    sdzjClick(){
      let list = this.idList.toString()
      sdzjts({userids:list}).then(res => {
        if(res.code == 200){
          this.$message.success(res.message)
          this.reCommpVxeTable = Date.now()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>
